<template>
  <div class="trainDetail">
    <app-header></app-header>
    <div class="curse_box">
      <div  class="curse_item">
        <img :src="model.trainClassImg" />
        <div class="item_right">
          <h4>{{model.trainClassName}}</h4>
          <p>报名时间:{{model.applyStartDate|dateFormat('YYYY-MM-DD')}}至{{model.applyEndDate|dateFormat('YYYY-MM-DD')}}</p>
        </div>
      </div>
    </div>

    <div class="basic">
      <h3 class="secTitle">基本信息</h3>
      <div class="basicInfo">
        <p>培训方式：{{model.trainWay}}</p>
        <p v-if="model.trainStartDate">培训时间：{{model.trainStartDate|dateFormat('YYYY-MM-DD')}}至{{model.trainEndDate|dateFormat('YYYY-MM-DD')}}</p>
        <p v-if="model.isExam=='1'">考试时间：{{model.examStartDate}}至{{model.examEndDate}}</p>
        <p>培训班状态：{{model.status|trainClassStatus}}</p>
        <p>创建单位：{{model.cteateDepName}}</p>
      </div>
    </div>

    <div class="trainInfo1">
      <h3 class="secTitle">线上课程信息<span :class="{'hideMore':toggle}" @click="hideMore"></span></h3>
      <ul class="onlineList1" v-if="!toggle">
        <li v-for="(item, index) in model.courseList" :key="index" class="online_item">
          <img :src="item.courseImg" />
          <div class="online_right">
            <h4>{{item.courseName}}</h4>
            <p class="online_det">总学时:{{item.courseTime}}学时</p>
          </div>
        </li>
      </ul>
      <ul class="onlineList2" v-else>
        <li v-for="(item, index) in model.courseList" :key="index">{{item.courseName}}</li>
      </ul>
    </div>

    <div class="trainInfo2" v-if="model.trainWay=='面授'">
      <h3 class="secTitle">线下课程信息<span :class="{'hideMore':toggle2}" @click="hideMore2"></span></h3>
      <ul class="onlineList1" v-if="!toggle2">
        <li v-for="(item, index) in model.faceTrainList" :key="index" class="online_item">
          <img :src="item.src" />
          <div class="online_right">
            <h4>{{item.courseName}}</h4>
            <p class="online_det">总学时:{{item.courseTime}}学时<span>老师:{{item.faceTeacher}}</span></p>
            <p class="time_start">{{item.faceStartDate}}</p>
            <p class="time_end">{{item.faceEndDate}}</p>
          </div>
        </li>
      </ul>
      <ul class="onlineList2" v-else>
        <li v-for="(item, index) in model.faceTrainList" :key="index">{{item.courseName}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
  import { } from 'vux'
  import Header from "../../components/header";
  import { getVTrainClassInfo } from '@/api/index'
  export default {
    name: 'trainDetail',
    components: {
      "app-header": Header,
    },
    data() {
      return {
        trainClassId:'',
        toggle: false,
        toggle2: false,
        model: {
        },
        curseList: [
          { src: require('../../assets/images/corse_img1.png'), title: '2020年全省应急管理普法学习常规知识', time: '2020-3-10至2020-4-10' }
        ],
        onlineList: [
          { src: require('../../assets/images/corse_img2.png'), title: '安全生产法律法规', time1: '12', teacher: '张三', time2: '2020-3-25 8:00', time3: '2020-3-30 8:00' }
        ],
        underlineList: [
          { src: require('../../assets/images/corse_img3.png'), title: '消防安全知识', time1: '24' }
        ]
      }
    },
    created() {
      this.trainClassId = this.$route.query.id;
      this.$vux.loading.show({
          text: "Loading"
      });
      getVTrainClassInfo({ id: this.trainClassId }).then(response => {
        this.model = response;
        this.$vux.loading.hide();
      });
    },
    methods: {
      hideMore: function () {
        this.toggle = !this.toggle
      },
      hideMore2: function () {
        this.toggle2 = !this.toggle2
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .trainDetail {
    background: #ebeef2;
  }

  .curse_box {
    padding: 20px 15px;
    background: #fff;
    margin-bottom: 5px;
    box-sizing: border-box;
    padding-top:90px;
  }

  .curse_item {
    display: flex;
    justify-content: space-between;
    height: 90px;
  }

    .curse_item img {
      width: 135px;
      height: 90px;
    }

  .item_right {
    margin-left: 10px;
    width: calc(100% - 145px);
    padding-top: 4px;
  }

    .item_right h4 {
      font-size: 15px;
      font-weight: bold;
      color: #333;
      width: 100%;
      margin-bottom: 6px;
      text-align: left;
      white-space: normal;
    }

    .item_right p {
      background: url("../../assets/images/time_icon.png") left center no-repeat;
      background-size: 11px 11px;
      padding-left: 13px;
      color: #999;
      font-size: 12px;
      text-align: left;
    }

  .basic {
    background: #fff;
    text-align: left;
  }

  h3.secTitle {
    font-size: 15px;
    font-weight: bold;
    color: #2269ff;
    padding: 0 15px;
    display: flex;
    align-items: center;
    height: 40px;
    position: relative;
  }

  .basicInfo {
    padding: 8px 15px;
    font-size: 14px;
    line-height: 24px;
    border-bottom: 1px solid #efeff4;
    border-top: 1px solid #efeff4;
  }

  .trainInfo1, .trainInfo2 {
    background: #fff;
    padding-bottom: 10px;
  }

  .trainInfo1 {
    border-bottom: 1px solid #efeff4;
  }

  h3.secTitle span {
    position: absolute;
    display: block;
    height: 20px;
    width: 20px;
    background: url('../../assets/images/show_more.png') no-repeat center center;
    background-size: 12px 7px;
    right: 11px;
    top: 10px;
    transform: rotate(0deg);
    transition: .3s;
  }

    h3.secTitle span.hideMore {
      transform: rotate(180deg);
      transition: .3s
    }

  .onlineList1 {
    padding: 0 15px;
  }

  .online_item {
    display: flex;
    justify-content: space-between;
    height: 90px;
    padding: 5px 0;
    margin-bottom: 5px;
  }

    .online_item img {
      width: 135px;
      height: 90px;
    }

  .online_right {
    margin-left: 10px;
    width: calc(100% - 145px);
  }

    .online_right h4 {
      font-size: 15px;
      font-weight: bold;
      color: #333;
      width: 100%;
      margin-bottom: 4px;
      text-align: left;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

  .online_det {
    color: #999;
    font-size: 12px;
    text-align: left;
    margin-bottom: 4px;
  }

    .online_det span {
      float: right;
      color: #2269ff;
    }

  .time_start {
    background: url('../../assets/images/time_start.png') no-repeat left center;
    background-size: 20px 20px;
    font-size: 12px;
    color: #2269ff;
    height: 20px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    padding-left: 25px;
  }

  .time_end {
    background: url('../../assets/images/time_end.png') no-repeat left center;
    background-size: 20px 20px;
    font-size: 12px;
    height: 20px;
    color: #fe6000;
    display: flex;
    align-items: center;
    padding-left: 25px;
  }

  .onlineList2 {
    padding: 0 15px;
    text-align: left;
  }

    .onlineList2 li {
      font-weight: bold;
      font-size: 15px;
      list-style: none;
      line-height: 26px;
    }
</style>
